<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<TitleModule :title="'添加/修改角色信息'"></TitleModule>
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-row>
				<el-form label-position="right" label-width="100px" :model="formInline" style="" :rules="rules" :ref="'form'">
					<el-col :span="6">
					<el-form-item label="角色名称" prop="roleName">
						<el-input v-model.trim="formInline.roleName"></el-input>
					</el-form-item>
					<el-form-item label="是否只读" prop="readOnly">
						<el-select v-model.trim="formInline.readOnly" filterable placeholder="">
							<el-option label="否" value="0"></el-option>
							<el-option label="是" value="1"></el-option>
						</el-select>
					</el-form-item>					
					<el-form-item label="备注">
						<el-input v-model.trim="formInline.remark"></el-input>
					</el-form-item>					
					</el-col>
					<el-col :span="6" :offset="6">
					<el-form-item label="绑定功能">
						<el-tree :data="treeList" show-checkbox default-expand-all node-key="resourceId" :props="defaultProps" :ref="'tree'">
						</el-tree>
					</el-form-item>
					</el-col>
				</el-form>
				</el-row>				
				<div style="text-align: center; margin-top: 20px; ">
					<el-button type="primary" @click="submitData" style="width: 88px;">提交</el-button>
					<el-button type="" @click="$router.replace({path: '/roleManage'})" style="width: 88px;">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getData
	} from '../../common/js/public.js'
	import TitleModule from '../../components/titleModule/titleModule'
	export default {
		name: 'hello',
		data () {
			return {
				isEdit: false,
				treeList: [],
				resourceList: [],
				defaultProps: {
					children: 'children',
					label: 'resourceName'
				},
				formInline: {
					roleName: '',
					readOnly: '0',
					remark: '',
					roleId: ''
				},
				rules: {
					roleName: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}],
					readOnly: [{
						required: true,
						message: '请选择是否只读',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			getResource () {
				let opt = {
					url: '/gplus/resource/queryList',
					data: {"applicationPlatform": "0"},
					success: (res) => {
						this.resourceList = res.data.ResourceVO;
						this.treeList = this.formatTree(this.resourceList);
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			submitData () {
				this.$refs['form'].validate((valid) => {
					if (valid) {					
						if (this.isEdit) {
							this.delUserRole();
						} else {
							this.addList();
						}						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			delUserRole () {
				let opt = {
					url: '/gplus/roleAndResource/deleteByRoleID',
					data: {
						"roleId": this.$route.query.roleId
					},
					success: (res) => {
						this.addList();
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			formatTree (targetList) {
				let areaList = targetList.slice(0);
				let list = [];
				for (let i in areaList) {
					for (let j in areaList) {
						if (areaList[j].parentId == areaList[i].resourceId) {
							areaList[i].children ? areaList[i].children.push(areaList[j]) : areaList[i].children = [ areaList[j] ];
						}
					}
					if (!areaList[i].parentId) {
						list.push(areaList[i]);
					};
				}
				return list;
			},
			addList () {
				let opt = {
					url: !this.isEdit ? '/gplus/role/add' : '/gplus/role/update',
					data: this.formInline,
					success: (res) => {
						let roleId = res.data.RoleVO.roleId;
						this.addRoleList(roleId);
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			queryDetail () {				
				let opt = {
					url: '/gplus/role/query',
					data: {
						"roleId": this.$route.query.roleId
					},
					success: (res) => {						
						for (let i in this.formInline) {							
							this.formInline[i] = res.data.RoleVO[i].toString();
						}
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			queryUserRole () {
				let opt = {
					url: '/gplus/resource/queryRoleResourceList',
					data: {
						"roleId": this.$route.query.roleId
					},
					success: (res) => {
						let data = res.data.ResourceVO;
						let arr = [];
						for (let i = 0; i < data.length; i++) {							
							arr.push(data[i].resourceId);
						}
						this.$refs.tree.setCheckedKeys(arr);
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},			
			addRoleList (userId) {	
				let arr = [];
				let checkList = this.$refs['tree'].getCheckedKeys();
				for (let i = 0; i < checkList.length; i++) {
					let obj = {
						"roleId": userId,
						"resourceId": checkList[i]
					};
					arr.push(obj);
				}
				let opt = {
					url: '/gplus/roleAndResource/addList',
					data: arr,
					success: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						}).then(() => {							
							this.$router.go(-1);
						});
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			}
		},
		components: {
			TitleModule
		},
		created () {
			this.getResource();
		},
		mounted () {
			if (this.$route.query.roleId) {		
				this.isEdit = true;
				this.queryDetail();
				this.queryUserRole();
			}
		},		
		computed: {
		}
	}
</script>	
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	border: 1px solid #C0CCDA;
	border-radius: 4px;
	padding: 20px;
</style>
